/*css reset*/
html, body, div, header, nav, article, aside, footer, a, p, img, ul, li, h3 {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
a {
  text-decoration: none;
  color: #000;
}
li {
  list-style-type: none;
}
h4 {
  margin: 0;
  line-height: 3;
  font-size: 14px;
  color: #1a5bef;
  font-weight: bold;
}

/*global styles*/
#wrapper {
  width: 98%;
  margin: 0 auto;
  position: relative;
}
.clearfix:after {
  content: '';
  clear: both;
  display: block;
  visibility: hidden;
  opacity: 0;
  height: 0;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.text-center {
  text-align: center;
}
.transition {
  transition: 300ms all linear;
}
img {
  max-width: 100%;
}
.black {
  color: #000;
}
.white {
  color: #fff;
}
body {
  font: 16px/1.5 arial, helvetics, sans-serif;
  background: #fff no-repeat fixed center center;
  background-size: cover;
  padding-bottom: 50px;
  opacity: 0;
  transition: 800ms all linear 0ms;
  &.show-body {
    opacity: 1;
    background-image: url('../img/sky.jpg');
  }
}
/*page content*/
@media screen and (min-width: 980px) {
  .page-content {
    position: relative;
    width: 980px;
    margin: 0 auto;
  }
  .section-sidebar, .section-content {
    display: table-cell;
    vertical-align: top;
    border-bottom: 3px double black;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .3) inset;
  }
  .section-content {
    width: 100%;
    background-color: rgba(240, 160, 80, .5);
    &.padding-bottom-l {
      padding-bottom: 15px;
    }
    &.h260 {
      height: 260px;
    }
  }
}

@media screen and (max-width: 979px) {
  .page-content {
    position: relative;
  }
  .section-sidebar {
    display: block;
  }
  .section-content {
    display: block;
  }
}

.note-title {
  font-size: 14px;
  color: #1a5bef;
  text-align: center;
  line-height: 30px;
  background-color: rgba(240, 160, 80, .8);
  margin: 8px 0;
}